import React, { useState, useMemo, useEffect } from 'react';
import { Common } from 'UtilsCommon';
import Base from './base';

const valueChange = (property, view, value) => {
    if (property.valueChange) property.valueChange(value, Base.getSelectData(property, value));

    if (property.valueVisibleProperties) Base.setValueVisibleProperties(property, view, value);
};

const getValue = (property, v) => {
    if (Common.isNullOrEmpty(v)) return [];

    if (Common.isArray(v)) return v;

    if (property.isJson) return JSON.parse(v);
    return v.split(',');
};

const getCheckBoxPropertiesByName = (offImgUrl, properties, onChange, checkBoxProperties, checkBoxItemProperties) => {
    properties.forEach(p => {
        if (p.isCheckBoxItem) { p.eventActionName = onChange; checkBoxItemProperties.push(p); }
        if (p.isCheckBox) { p.imgUrl = offImgUrl; checkBoxProperties.push(p); }
        if (p.properties) getCheckBoxPropertiesByName(offImgUrl, p.properties, onChange, checkBoxProperties, checkBoxItemProperties);
    });
};

const initObj = (property) => {
    const checkBoxProperties = [];
    const checkBoxItemProperties = [];

    if (property.properties) {
        getCheckBoxPropertiesByName(property.offImgUrl, property.properties, property.onChangeActionName, checkBoxProperties, checkBoxItemProperties);
    }

    return { checkBoxProperties, checkBoxItemProperties, value: getValue(property, property.value) };
};

const setCheckBoxChecked = (p, checked, property) => {
    const { onImgUrl, offImgUrl } = property;
    p.setValue && p.setValue(checked ? onImgUrl : offImgUrl);
    p.imgUrl = checked ? onImgUrl : offImgUrl;
    property.setCheckBoxChecked && property.setCheckBoxChecked(p, checked, property);
};

const setCheckBoxItemChecked = (p, checked, property) => {
    const { onItemStyle, offItemStyle } = property;
    if (checked) p.style = { ...p.style, ...onItemStyle };
    else p.style = { ...p.style, ...offItemStyle };
    if (p.refresh) p.refresh();
};

const setValue = (obj, value, checkBoxProperties, checkBoxItemProperties, property) => {
    obj.value = value;
    checkBoxProperties.forEach(p2 => {
        const checked = value.includes(p2.propertyValue);
        setCheckBoxChecked(p2, checked, property);
    });
    if (property.onItemStyle && property.offItemStyle) {
        checkBoxItemProperties.forEach(p2 => {
            const checked = value.includes(p2.propertyValue);
            setCheckBoxItemChecked(p2, checked, property);
        });
    }
};

export default React.memo((props) => {
    const { property, view, pageAxis, pageId } = Base.getProps(props);

    const obj = useMemo(() => initObj(property), [property]);
    const [isVisible, setIsVisible] = useState(property.isVisible !== false);
    const [disabled, setDisabled] = useState(!!property.disabled);

    pageAxis[property.onChangeActionName] = (props2) => {
        if (disabled) return;
        const p = props2.property;
        if (property.isSingle) {
            obj.checkBoxProperties.forEach(p2 => {
                if (p2.propertyValue === p.propertyValue) {
                    setCheckBoxChecked(p2, true, property);
                    obj.value = [p2.propertyValue];
                }
                else setCheckBoxChecked(p2, false, property);
            });

            if (property.onItemStyle && property.offItemStyle) {
                obj.checkBoxItemProperties.forEach(p2 => {
                    if (p2.propertyValue === p.propertyValue) setCheckBoxItemChecked(p2, true, property);
                    else setCheckBoxItemChecked(p2, false, property);
                });
            }
        }
        else {
            const checked = !obj.value.includes(p.propertyValue);
            if (!checked) obj.value = obj.value.filter(f => !Common.isEquals(f, p.propertyValue));
            else {
                if (property.maxLength > 0 && obj.value.length >= property.maxLength) return;
                obj.value.push(p.propertyValue);
            }

            const checkBoxProperty = Common.arrayFirst(obj.checkBoxProperties, f => f.propertyValue === p.propertyValue);
            if (checkBoxProperty) setCheckBoxChecked(checkBoxProperty, checked, property);

            if (property.onItemStyle && property.offItemStyle) {
                const checkBoxItemProperty = Common.arrayFirst(obj.checkBoxItemProperties, f => f.propertyValue === p.propertyValue);
                if (checkBoxItemProperty) setCheckBoxItemChecked(checkBoxItemProperty, checked, property);
            }
        }
        valueChange(property, view, obj.value);
    };

    useEffect(() => {
        property.value && setValue(obj, getValue(property, property.value), obj.checkBoxProperties, obj.checkBoxItemProperties, property);
    }, [property.value]);

    property.setIsVisible = (v) => { property.isVisible = v; setIsVisible(v); };
    property.setDisabled = (v) => setDisabled(v);
    property.setValue = (v) => setValue(obj, getValue(property, v), obj.checkBoxProperties, obj.checkBoxItemProperties, property);
    property.getValue = () => Base.getValue(property, obj.value);

    if (!isVisible) return null;

    const { style, labelStyle, label, listStyle, isRed, isAddColon, isNullable } = property;

    const isRed2 = property.isRed2 || (isNullable === false && isRed);

    const label2 = property.isLabel === false ? '' : label;

    return <div style={Base.setStyle(style)}>
        {label2 && <div style={Base.setStyle(labelStyle)}>
            {isRed2 ? <span style={{ color: 'red', position: 'relative', paddingRight: '0.125rem', top: '0.125rem' }}>*</span> : ''}
            <span dangerouslySetInnerHTML={{ __html: label2 }}></span>{isAddColon ? '：' : ''}
        </div>}
        <div style={Base.setStyle(listStyle)}>
            {Base.renderProperties(property, pageId)}
        </div>
    </div>;
});